import { Component } from "react";
import { Link } from "react-router-dom";
import { LeftCircleOutlined } from "@ant-design/icons";
import Card from "../../components/card";
import BaseGeoData from "./baseGeoData";
import Proj from "./proj";
import { port } from "../../assets/global";
import style from "./index.module.css";

class Port extends Component{
    constructor(props){
        super(props);
        this.state = {
            "selectedProj": "baseGeoData"
        };
        this.onProjChange = this.onProjChange.bind(this);
    }

    componentWillUnmount(){
        //console.log("组件即将卸载。");
    }

    render(){
        const portName = this.props.match.params.portName;
        const projects = port[portName].projects;
        let mapCom;
        if(this.state.selectedProj === "baseGeoData"){
            mapCom = <BaseGeoData portName={portName} />
        }
        else{
            mapCom = <Proj portName={portName} proj={this.state.selectedProj} />
        }
        return (
            <div className={style["container"]}>
                <div className={style["sider"]}>
                    <div className={style["menu"]}>
                        <h2 className={style["menu-h2"]}>{`资源类型（${port[portName].alias}）`}</h2>
                        <ul className={style["menu-ul"]} >
                            {
                                Object.keys(projects).map(item => (
                                    <li key={item} 
                                        className={item === this.state.selectedProj ? style["selected"] : ""} 
                                        onClick={() => {this.onProjChange(item)}}>
                                        {projects[item].alias}
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                </div>
                <div className={style["content"]}>
                    <Card style={{"height":"100%"}} title={`${port[portName].alias} - ${projects[this.state.selectedProj].alias}`}>
                        <div className={style["mapBox"]}>
                            {mapCom}
                        </div>
                    </Card>
                </div>
                <div className={style["returnBtn"]}>
                    <Link to="/home">
                       <LeftCircleOutlined style={{fontSize: "35px"}} />
                    </Link>
                </div>
            </div>
        );
    }

    onProjChange(projName){
       this.setState({
           "selectedProj": projName
       });
    }
}

export default Port;